<template>
    <el-descriptions :column="2" border title="账户信息">
        <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
            <el-image style="width: 100px; height: 100px"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </el-descriptions-item>
        <el-descriptions-item label="电子邮箱" align="center">
            <div class="change-info">
                <a>{{ authStore.user.email }}</a>
                <el-button type="primary" round>修改邮箱</el-button>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="电话号码" align="center">
            <div class="change-info">
                <a>{{ authStore.user.phone }}</a>
                <el-button type="primary" round>修改电话号码</el-button>
            </div>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup>
import { } from "vue"
import { useAuthStore } from "@/stores/auth";

const authStore = useAuthStore();
</script>

<style lang="scss" scoped>
.change-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
